<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 角色权限 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button v-if="threeLevelsbool.add" type="primary" class="handle-del" @click="addTable">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="roleName" width="200" label="身份"></el-table-column>
        <el-table-column prop="updateTime" width="200" label="录入时间"></el-table-column>
        <el-table-column prop="rRemarks" label="备注"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button v-if="threeLevelsbool.edit" type="text" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button v-if="threeLevelsbool.del" type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                       :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="添加身份信息" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="form" label-width="70px" v-loading="dialogLoading">
        <el-form-item label="身份">
          <el-input v-model="identityText"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader v-model="BumenSelected" :options="Bumendata" :props="{ checkStrictly: true }" style="width: 100%"></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditAdd()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除弹出 -->
    <el-dialog title="删除身份信息" :visible.sync="dialogRemoveFlg" width="30%" :close-on-click-modal="false">
      <el-form ref="form" label-width="0" v-loading="dialogRemoveFlgLoad">
        <div style="font-size: 14px; margin-bottom: 10px"><span style="color: red">*</span> 将该身份下的人员重新分配其他身份</div>
        <el-form-item label="">
          <el-radio-group v-model="dialogRemoveListData">
            <el-radio label="团队经理"></el-radio>
            <el-radio label="客服经理"></el-radio>
            <el-radio label="华北区经理"></el-radio>
            <el-radio label="省级代理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRemoveFlg = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑权限 -->
    <el-drawer title="我是标题" :visible.sync="drawerFlg" direction="rtl" :show-close="false" size="85%" :with-header="false">
      <el-row style="padding: 20px" v-loading="drawerFlgLoad">
        <el-col :span="24" class="fourRight">
          <el-col :span="24" class="fourRight-right">
            <el-col :span="4" style="line-height: 32px"> 角色身份名称 </el-col>
            <el-col :span="20">
              <el-input v-model="rolePermissionsName" placeholder="请输入内容"></el-input>
            </el-col>
          </el-col>
          <el-col :span="24" class="fourRight-right" v-if="threeLevelsbool.jueRole">
            <el-col :span="4"> 角色数据权限 </el-col>
            <el-col :span="20">
              <el-radio-group v-model="rolePermissionsData">
                <el-radio label="1" v-if="rolePermissionsDataIs >= '1'">仅看自己</el-radio>
                <el-radio label="2" v-if="rolePermissionsDataIs >= '2'">当前小组</el-radio>
                <el-radio label="3" v-if="rolePermissionsDataIs >= '3'">当前部门</el-radio>
                <el-radio label="4" v-if="rolePermissionsDataIs >= '4'">全公司</el-radio>
                <el-radio label="5" v-if="rolePermissionsDataIs >= '5'">所有门店</el-radio>
              </el-radio-group>
            </el-col>
          </el-col>
          <el-col :span="24" class="fourRight-right" v-if="threeLevelsbool.renRole">
            <el-col :span="4"> 人员部门数据权限 </el-col>
            <el-col :span="20">
              <el-radio-group v-model="rolePermissionsUserData">
                <el-radio label="1" v-if="rolePermissionsUserDataIs>='1'">仅看自己</el-radio>
                <el-radio label="2" v-if="rolePermissionsUserDataIs>='2'">当前小组</el-radio>
                <el-radio label="3" v-if="rolePermissionsUserDataIs>='3'">当前部门</el-radio>
                <el-radio label="4" v-if="rolePermissionsUserDataIs>='4'">全公司</el-radio>
                <el-radio label="5" v-if="rolePermissionsUserDataIs>='5'">所有门店</el-radio>
              </el-radio-group>
            </el-col>
          </el-col>
          <el-col :span="24" class="fourRight-right" v-for="(item, i) in formRolePermissions" :key="item.id">
            <el-checkbox-group v-model="formRolePermissionsCheckedId">
              <el-col :span="4">
                <el-checkbox :label="item.id">{{ item.pageName }}</el-checkbox>
              </el-col>
              <el-col :span="20">
                <el-checkbox-group v-model="formRolePermissionsCheckedId">
                  <el-checkbox v-for="(e, index) in item.pageBtn" :key="e.id" :label="e.id">{{ e.pageName }}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-checkbox-group>
          </el-col>
          <el-col :span="24" style="text-align: center; margin-top: 15px">
            <el-button type="primary" @click="roleEditSub">提交</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import {
  RolePermissionsAjax,
  PersonnelBUInfo,
  RolePermissionsAddAjax,
  RolePermissionsEditAjax,
  RolePermissionsEditAjaxSub,
  RolePermissionsDelAjax,
  RolePermissionsQX
} from '../../../api/index';
import bus from '../../common/bus';

export default {
  data() {
    return {
      rolePermissionsData: '',
      rolePermissionsDataIs: '',
      rolePermissionsUserData: '',
      rolePermissionsUserDataIs: '',
      rolePermissionsName: '',
      formRolePermissionsCheckedId: [],
      roleId: '',
      formRolePermissions: [
        {
          pageName: '人员部门',
          checkedVal: true,
          id: 1,
          pageBtnVal: [0],
          pageBtn: [
            {
              pageName: '新增部门',
              id: 0
            },
            {
              pageName: '编辑部门',
              id: 1
            },
            {
              pageName: '删除部门',
              id: 2
            },
            {
              pageName: '新增人员',
              id: 3
            },
            {
              pageName: '编辑人员',
              id: 4
            },
            {
              pageName: '删除人员',
              id: 5
            }
          ]
        },
        {
          pageName: '角色权限',
          checkedVal: '',
          id: 2,
          pageBtnVal: [],
          pageBtn: [
            {
              pageName: '新增角色',
              id: 0
            },
            {
              pageName: '编辑角色',
              id: 1
            },
            {
              pageName: '删除角色',
              id: 2
            },
            {
              pageName: '角色数据权限',
              id: 3
            },
            {
              pageName: '人员部门数据权限',
              id: 4
            }
          ]
        },
        {
          pageName: '系统设置',
          checkedVal: '',
          id: 128,
          pageBtnVal: [1],
          pageBtn: [
            {
              pageName: '人员权重',
              id: 0
            },
            {
              pageName: '人员自动分配方式',
              id: 1
            }
          ]
        },
        {
          pageName: '门店管理',
          checkedVal: '',
          id: 54,
          pageBtnVal: [1],
          pageBtn: [
            {
              pageName: '新增',
              id: 0
            },
            {
              pageName: '编辑',
              id: 1
            },
            {
              pageName: '删除',
              id: 2
            }
          ]
        },
        {
          pageName: '数据中心',
          checkedVal: '',
          id: 865,
          pageBtnVal: [],
          pageBtn: []
        },
        {
          pageName: '今日待办',
          checkedVal: '',
          id: 4456,
          pageBtnVal: [1, 2],
          pageBtn: [
            {
              pageName: '编辑',
              id: 0
            },
            {
              pageName: '删除',
              id: 1
            },
            {
              pageName: '放入公海',
              id: 2
            }
          ]
        },
        {
          pageName: '我的客户',
          checkedVal: '',
          id: 223,
          pageBtnVal: [1, 4],
          pageBtn: [
            {
              pageName: '新增',
              id: 0
            },
            {
              pageName: '编辑',
              id: 1
            },
            {
              pageName: '删除',
              id: 2
            },
            {
              pageName: '放入公海',
              id: 3
            },
            {
              pageName: '导入',
              id: 4
            },
            {
              pageName: '导出',
              id: 5
            }
          ]
        },
        {
          pageName: '再分配客户',
          checkedVal: '',
          id: 435,
          pageBtnVal: [1, 3],
          pageBtn: [
            {
              pageName: '编辑',
              id: 1
            },
            {
              pageName: '删除',
              id: 2
            },
            {
              pageName: '放入公海',
              id: 3
            },
            {
              pageName: '导出',
              id: 5
            }
          ]
        },
        {
          pageName: '重要客户',
          checkedVal: '',
          id: 13,
          pageBtnVal: [1, 3],
          pageBtn: [
            {
              pageName: '编辑',
              id: 1
            },
            {
              pageName: '删除',
              id: 2
            },
            {
              pageName: '放入公海',
              id: 3
            },
            {
              pageName: '导出',
              id: 5
            }
          ]
        },
        {
          pageName: '所有客户列表',
          checkedVal: '',
          id: 965,
          pageBtnVal: [],
          pageBtn: [
            {
              pageName: '删除',
              id: 2
            }
          ]
        },
        {
          pageName: '公海',
          checkedVal: '',
          id: 845,
          pageBtnVal: [2, 4, 5],
          pageBtn: [
            {
              pageName: '新建',
              id: 0
            },
            {
              pageName: '编辑',
              id: 1
            },
            {
              pageName: '删除',
              id: 2
            },
            {
              pageName: '新增客户',
              id: 3
            },
            {
              pageName: '编辑客户',
              id: 4
            },
            {
              pageName: '删除客户',
              id: 5
            },
            {
              pageName: '捞取/分配',
              id: 6
            },
            {
              pageName: '导入',
              id: 7
            },
            {
              pageName: '导出',
              id: 8
            },
            {
              pageName: '公海设置权限',
              id: 9
            },
            {
              pageName: '设置该公海对其他人/团队开放权限',
              id: 10
            }
          ]
        },
        {
          pageName: '成交记录',
          checkedVal: '',
          id: 52,
          pageBtnVal: [],
          pageBtn: [
            {
              pageName: '回收客户',
              id: 10
            }
          ]
        }
      ],
      form: {
        type: [],
        radio2: []
      },
      drawerFlg: false,
      drawerFlgLoad: false,

      dialogRemoveFlg: false,
      dialogRemoveFlgLoad: true,
      dialogRemoveListData: [],

      loading: true,
      query: {
        page: 1,
        limit: 10
      },
      tableData: [],
      totalCount: 0,
      totalPage: 0,

      //新增
      identityText: '',
      Bumendata: [],
      BumenSelected: [],
      editVisible: false,
      dialogLoading: true,

      multipleSelection: [],

      threeLevelsbool: {
        add: false,
        edit: false,
        del: false,
        jueRole: false,
        renRole: false
      }
    };
  },
  created() {
    this.threeLevels();
    this.getData();
  },
  watch: {
    $route: 'getData'
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      RolePermissionsAjax(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.roleList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //新增操作
    addTable() {
      this.editVisible = true;
      this.dialogLoading = true;
      this.identityText = '';
      this.Bumendata = [];
      this.BUInfo();
    },
    //新增获取部门结构
    BUInfo() {
      PersonnelBUInfo()
        .then((res) => {
          this.dialogLoading = false;
          if (res.code === 0) {
            if (res.teamList.length > 0) {
              res.teamList.forEach((item, i) => {
                this.Bumendata.push({
                  label: item.name,
                  value: item.id
                });
                this.BUInfoDataFor(item.childTeam, this.Bumendata[i]);
              });
            }
          } else {
            this.$message(res.msg);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    //初始化部门下级循环
    BUInfoDataFor(item, arr) {
      if (item.length > 0) {
        arr.children = [];
        item.forEach((e, i) => {
          arr.children.push({
            label: e.name,
            value: e.id
          });
          this.BUInfoDataFor(e.childTeam, arr.children[i]);
        });
      }
    },
    //新增编辑提交前验证
    saveEditAdd() {
      if (!this.identityText) {
        this.$message('请填写身份');
        return false;
      }
      if (this.BumenSelected.length == 0) {
        this.$message('请选择部门');
        return false;
      }
      this.dialogLoading = true;
      let query = {
        roleName: this.identityText,
        teamId: this.BumenSelected[this.BumenSelected.length - 1]
      };
      this.saveEditAddSub(query);
    },
    // 新增提交
    saveEditAddSub(query) {
      RolePermissionsAddAjax(query)
        .then((res) => {
          this.dialogLoading = false;
          if (res.code === 0) {
            this.editVisible = false;
            this.$message.success('添加成功');
            this.loading = true;
            this.getData();
          } else {
            this.$message(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 编辑操作
    handleEdit(id) {
      this.drawerFlg = true;
      this.drawerFlgLoad = true;
      this.roleId = id;
      RolePermissionsEditAjax({ roleId: id }).then((res) => {
        this.drawerFlgLoad = false;
        if (res.code === 0) {
          this.formRolePermissions = [];
          this.rolePermissionsName = res.roleName;
          this.rolePermissionsUserData = String(res.dataPermission.dpOrder);
          this.rolePermissionsUserDataIs = res.dataOrder;
          this.rolePermissionsData = String(res.roleDataPermission.dpOrder);
          this.rolePermissionsDataIs = res.roleDataOrder;
          this.formRolePermissionsCheckedId = res.menuIds;
          res.menus.forEach((item, i) => {
            item.childMenus.forEach((e, index) => {
              this.formRolePermissions.push({
                pageName: e.name,
                id: e.id,
                pageBtn: []
              });
              e.childMenus.forEach((ev, y) => {
                this.formRolePermissions[this.formRolePermissions.length - 1].pageBtn.push({
                  pageName: ev.name,
                  id: ev.id
                });
              });
            });
          });
        } else {
          this.$message(res.msg);
        }
      });
    },
    //编辑提交
    roleEditSub() {
      this.drawerFlgLoad = true;
      let subObj = {
        menuIds: this.formRolePermissionsCheckedId,
        role: {
          id: this.roleId,
          roleName: this.rolePermissionsName
        },
        roleDataPermission: this.rolePermissionsData,
        dataPermission: this.rolePermissionsUserData
      };
      RolePermissionsEditAjaxSub(subObj)
        .then((res) => {
          if (res.code === 0) {
            this.drawerFlg = false;
            this.drawerFlgLoad = false;
            this.$message.success('编辑成功');
            this.loading = true;
            this.getData();
          } else {
            this.$message(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除
    handleDelete(id) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.loading = true;
          RolePermissionsDelAjax({ roleId: id }).then((res) => {
            if (res.code === 0) {
              this.$message.success('删除成功');
              this.getData();
            } else {
              this.loading = false;
              this.$message(res.msg);
            }
          });
        })
        .catch(() => { });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item, i) => {
        this.multipleSelection.push(item.id);
      });
    },
    //三级权限
    threeLevels() {
      let parentRouth = this.$route.path.replace('/', '');
      RolePermissionsQX({ urlName: parentRouth }).then((res) => {
        if (res.code === 0) {
          res.buttons.forEach((item, i) => {
            switch (item.name) {
              case '新增角色':
                this.threeLevelsbool.add = item.pageIsShow;
                break;
              case '编辑角色':
                this.threeLevelsbool.edit = item.pageIsShow;
                break;
              case '删除角色':
                this.threeLevelsbool.del = item.pageIsShow;
                break;
              case '角色数据权限':
                this.threeLevelsbool.jueRole = item.pageIsShow;
                break;
              case '人员部门数据权限':
                this.threeLevelsbool.renRole = item.pageIsShow;
                break;
            }
          });
        } else {
          this.$message(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
/deep/ :focus {
    outline: 0;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-select {
    width: 100%;
}
.right-border {
    border: 1px solid #ebeef5;
    border-bottom: none;
}
.right-border li:first-child {
    font-weight: bold;
}
.right-border li {
    text-align: center;
    font-size: 14px;
    color: #606266;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
}
.right-border li div {
    font-size: 12px;
}
.right-border li.active {
    color: #409eff;
}
.fourRight {
    color: #606266;
    font-size: 14px;
    padding-left: 20px;
}
.pd10 {
    padding: 10px 0;
}
.fourRight-right {
    border: 1px solid #ebeef5;
    padding: 10px 15px;
    margin-bottom: 10px;
    line-height: 1.7;
}

.el-radio {
    line-height: 1.7;
}
</style>
